<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <!--<el-row class="row-bg" type="flex" align="middle">-->
    <!--<p style="padding: 0;margin: 0"><b>消息模板关键字信息</b>  配置消息模板类型及每个类型下的关键字-->
    <!--</p>-->
    <!--</el-row>-->
    <el-card>
      <div style="text-align: left;margin-bottom: 10px">
        <el-button round size="small" type="primary" icon="el-icon-plus" @click="add">关联发布媒介</el-button>
      </div>
      <el-table :data="sendMediaPage" row-key="sendMediaId">
        <el-table-column label="发布媒介" prop="sendMedia" align="left">
          <template slot-scope="scope">
            <ft-enum-select v-model="scope.row.sendMedia" service-name="joys-admin" type-name="sendMedia"
                            :editing="scope.row.editable">
            </ft-enum-select>
          </template>
        </el-table-column>
        <el-table-column label="关联应用" prop="appletId" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.editable">
              <message-applet-select v-if="scope.row.sendMedia==='MOBILE_EQUIPMENT'"
                                     v-model="scope.row.appletId" :type-tags="['MAPP']" placeholder="请选择或输入移动应用"
                                     @change="changeApplet($event,scope.$index, scope.row)">
              </message-applet-select>
              <message-applet-select v-if="scope.row.sendMedia==='PC_EQUIPMENT'"
                                     v-model="scope.row.appletId" :type-tags="['NODE']" placeholder="请选择或输入功能应用"
                                     @change="changeApplet($event,scope.$index, scope.row)">
              </message-applet-select>
            </div>
            <span v-else>{{scope.row.appletName}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text" size="small"
              @click="save(scope.$index, scope.row)" v-if="scope.row.editable">保存
            </el-button>
            <el-button type="text" size="small" @click="cancel(scope.$index,scope.row)"
                       v-if="scope.row.editable">
              取消
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.$index, scope.row)" v-if="!scope.row.editable&&display=='Y'">修改
            </el-button>
            <em class="media_em_cs"
                v-if="!scope.row.editable&&display=='Y'">|
            </em>
            <el-popover v-if="!scope.row.editable"
                        placement="top"
                        width="160"
                        v-model="scope.row.delVisible">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
                <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
  import MessageTemplateSelect from "./messageSelect/MessageTemplateSelect";
  import MessageAppletSelect from "./messageSelect/MessageAppletSelect";

  export default {
    name: "MessageSendMedia",
    props: ['templateTypeId'],
    components: {MessageAppletSelect, MessageTemplateSelect},
    data() {
      return {
        sendMediaPage: [],
        display: "Y",
        //临时克隆对象，用于修改取消还原数据
        obj: {}
      }
    },
    mounted() {
      this.loadSendMediaPage()
    },
    methods: {
      //分页查询
      loadSendMediaPage() {
        this.sendMediaPage = []
        this.display = "Y"
        const url = '/joys-rest/joys-admin/sendMedia/list/' + this.templateTypeId
        this.$http.get(url).then(resp => {
          this.sendMediaPage = resp.data
          for (let i = 0; i < this.sendMediaPage.length; i++) {
            this.sendMediaPage[i].editable = false
          }
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      add() {
        this.sendMediaPage.unshift({
          editable: true
        })
        this.display = "N"
      },
      changeApplet(info, index, value) {
        value.appletName = info.appletName
        this.$set(this.sendMediaPage, index, value)
      },
      save(index, value) {
        if (!value.sendMedia) {
          this.$message({
            message: '发布媒介不能为空',
            type: 'warning'
          });
          return
        } else {
          let sendMediaId = value.sendMediaId
          for (let i = 0; i < this.sendMediaPage.length; i++) {
            if (sendMediaId != this.sendMediaPage[i].sendMediaId && value.sendMedia == this.sendMediaPage[i].sendMedia) {
              this.$message({
                message: '发布媒介不能重复',
                type: 'warning'
              });
              return
            }
          }
        }
        if ((value.sendMediaId === 'MOBILE_EQUIPMENT' || value.sendMediaId === 'PC_EQUIPMENT') && !value.appletId) {
          this.$message({
            message: '应用不能为空',
            type: 'warning'
          });
          return
        }
        value.templateTypeId = this.templateTypeId
        const url = '/joys-rest/joys-admin/sendMedia/saveMedia'
        this.$http.put(url, value).then(resp => {
          value = resp.data
          value.editable = false
          this.$set(this.sendMediaPage, index, value)
          this.display = 'Y'
          console.log(resp.data)
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      cancel(index, vo) {
        this.display = 'Y'
        if (vo.sendMediaId != null) {
          //还原数据
          vo = JSON.parse(JSON.stringify(this.obj));
          vo.editable = false
          this.$set(this.sendMediaPage, index, vo)
        } else {
          this.sendMediaPage.splice(index, 1)
        }
      },
      handleEdit(index, vo) {
        vo.editable = true
        this.display = 'N'
        //克隆，取消修改时使用
        this.obj = JSON.parse(JSON.stringify(vo));
      },
      handleDelete(index, vo) {
        const url = '/joys-rest/joys-admin/sendMedia/' + vo.sendMediaId
        this.$http.delete(url).then(resp => {
          this.sendMediaPage.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }, resp => {
          this.$message({
            type: 'failed',
            message: '删除失败!'
          })
        });
      }
    }
  }
</script>
<style>
  .message-template-key__toolbar {
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }
</style>

<style scoped>
  .button-bar {
    display: inline-block;
    width: 150px;
    padding: 8px 0;
    vertical-align: top;
  }

  .input-bar {
    display: inline-block;
    width: calc(100% - 210px);
    font-size: 0px;
    vertical-align: top;
  }

  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 13px;
    padding-left: 20px;
  }

  .media_em_cs{
    font-family: PingFangSC-Regular;
    font-size: 13px;color:
    rgba(27,-2147483648,-2147483648,0.40);
    line-height: 13px;
    font-style:normal
  }
</style>
